
// ---------------  1. 创建剪裁区   收集起来
// 按照文档引入
// - 调用cropper方法，创建剪裁区
$('#image').cropper({
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
});

// ----------------------- 2. 点击 上传，可以选择图片，触发文件文件上传你DOM节点；上传图片
$('.open-img').click(function (e) {
    $('#file').click();
});

// ---------------- 3. 选择图片的input框注册 change 事件
$('#file').change(function () {
    // 1. 获取文件对象 得到选的图片的路径  
    // console.log(this.files);
    let obj = this.files[0];

    // 专门方法，把图片对象转为临时的url地址
    let url = URL.createObjectURL(obj); // blob:http://127.0.0.1:5500/882c8065-7fcb-4d9f-be12-ada95efb3637

    // 2. 替换成选的图片 查文档
    $('#image').cropper('replace', url);
});


// 图片文件：js对象
// js对象转字符串： base64位字符串
// 前端页面：
//      img        地址
//      css：背景图片         地址
//     请求文件的资源: 请求响应交互模型
//     百万并发 检测 服务器
// 减少请求: 提前将图片信息对象,转为字符串,直接写在 html  img 或 css 背景图
// 好处：图片信息之间随着页面返回，不会发生其他请求，获取图片
// 弊端：一个文件，总量大小比原来文件大小 大 30%
// 应用场景：小图转为 base64

let layer = layui.layer;
// ------------------------ 4. 点击确认按钮，上传base64格式的图片地址
$('.sure').click(function () {
    // 图片被插件渲染完图片 JQ对象
    // 1. 调用插件方法，剪裁图片；剪裁之后得到一张canvas格式的图片
    var canvas = $('#image').cropper('getCroppedCanvas', {
        width: 100,
        height: 100
    });
    // 2. 把canvas图片转成base64格式，得到超长字符串
    var base64 = canvas.toDataURL('image/png');
    // 3. 提交数据
    $.ajax({
        type: 'post',
        url: '/my/update/avatar',
        data: {
            avatar: base64
        },
        success: function (res) {
            layer.msg(res.message);
            if (res.status == 0) {
                // 重新渲染页面
                window.parent.getInfo();
            }
        }
    })
});